<!DOCTYPE html>
<html lang="en">

<head>
    <title>总览</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/overview.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
    <script src="../css/nutui/dist/nutui.js"></script>
    <script src="../js/bMap.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="app_list">
            <div class="app_listMapBtn">
                <div><input type="checkbox" v-model="group" value="全选" />正常</div>
                <div><input type="checkbox" v-model="group" value="报警" />报警</div>
                <div><input type="checkbox" v-model="group" value="离线" />离线</div>
            </div>
            <div class="app_listMap" id="app_listMap"></div>
            <div class="app_listPage" ref="appListMap">
                <div id="listDrag" class="listDrag">
                    <div id="barrage_name" class="barrage_name"></div>
                    <nut-row type="flex" flexWrap="nowrap" :gutter="6">
                        <nut-col :span="12">
                            <div class="listDrag_head1">
                                <div class="listDrag_headTop">供水量(m³)</div>
                                <div class="listDrag_headBottom"><span class="iconfont icon-shui"></span>4365</div>
                            </div>
                        </nut-col>
                        <nut-col :span="12">
                            <div class="listDrag_head2">
                                <div class="listDrag_headTop">电耗(kW·h)</div>
                                <div class="listDrag_headBottom"><span class="iconfont icon-shandian"></span>1428</div>
                            </div>
                        </nut-col>
                    </nut-row>
                    <div class="listDrag_tab">
                        <div :class="[listDragtabState == 1? 'listDrag_tabActive': '']" @click="listDragtabState = 1">
                            全部(53)</div>
                        <div :class="[listDragtabState == 2? 'listDrag_tabActive': '']" @click="listDragtabState = 2">
                            压力报警(21)</div>
                        <div :class="[listDragtabState == 3? 'listDrag_tabActive': '']" @click="listDragtabState = 3">
                            水质报警(21)</div>
                        <div :class="[listDragtabState == 4? 'listDrag_tabActive': '']" @click="listDragtabState = 4">
                            离线(21)</div>
                    </div>
                    <div id="tabbarBox"
                        :style="{height: (viewHeight - 168)+'px',overflow: tabbarBoxOverflow,'transition':`all .${number}s`,'top':`${translateY}px`}"
                        :style="{}" ref='scroll' id='box' @touchend='touchend' @touchmove='touchmove'
                        @touchstart='touchstart'>
                        <div class="listDrag_tabListItem" v-for="item in 20">
                            <div class="listItem1">
                                <div class="tips" ref="tips">出水压力高限</div>
                                <div class="title str" :style="{width: listItem1Title}">石岭塘社区1#</div>
                            </div>
                            <div class="listItem2">04-02 09:12</div>
                            <div class="listItem3">
                                <div class="txt">
                                    <div class="txt_tips">持续时间68分钟</div>
                                    <div class="txt_state1">0.29MPa<span class="iconfont icon-arrow-up"></span></div>
                                </div>
                                <div class="btn">确定</div>
                            </div>
                        </div>
                        <!-- <div class="listDrag_tabListItem">
                            <div class="listItem1">
                                <div class="tips" ref="tips">出水压力高限</div>
                                <div class="title str" :style="{width: listItem1Title}">石岭塘社区1#</div>
                            </div>
                            <div class="listItem2">04-02 09:12</div>
                            <div class="listItem3">
                                <div class="txt">
                                    <div class="txt_tips">持续时间68分钟</div>
                                    <div class="txt_state2">0.29MPa<span class="iconfont icon-arrow-up"></span></div>
                                </div>
                                <div class="btn">确定</div>
                            </div>
                        </div> -->
                    </div>

                </div>
                <!-- <nut-drag direction="y" :boundary="{ top: top(), bottom: bottom() }">
                
                </nut-drag> -->
            </div>
        </div>
        <nut-tabbar @tab-switch="tabSwitch" :tabbar-list="tabList" :bottom="true">
        </nut-tabbar>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                group: [],
                touchEndTitleShow: false, //控制手指离开屏幕的title显示
                touchstartTitleShow: false,//控制手指按下屏幕的title显示
                number: 0,//列表回弹动画时间
                translateY: 0,//列表随手指下拉而偏移的量
                startY: 0,//手指按住的位置的y坐标，也就是起始坐标
                hasNext: true,//是否还有下一页
                loading: false,//loading显示
                listDragtabState: 1,
                longitude: '112.35427',
                latitude: '28.84403',
                bMapDom: null,
                tabList: [],
                viewHeight: null,
                listItem1Title: null,
                tabbarBoxFixed: false,
                viewHeightState: false,
                tabbarBoxOverflow: 'hidden'
            },
            mounted() {
                this.getTablistInfo()
                this.getbMapDom()
                let tipsHeight = this.$refs.tips.offsetWidth
                let height = this.$refs.appListMap.offsetHeight
                this.viewHeight = height
                this.listItem1Title = 'calc(100% - ' + (tipsHeight + 4) + 'px)'
                this.initScrollChange()
            },
            watch: {
                viewHeightState(val) {
                    if (val == true) {
                        this.tabbarBoxOverflow = 'auto'
                        // $("#tabbarBox").scroll(() => {
                        //     this.handleScroll();
                        // })
                    } else {
                        this.tabbarBoxOverflow = 'hidden'
                    }
                }
            },
            methods: {
                //手指触碰到屏幕
                touchstart(e) {
                    this.number = 0
                    let y = e.targetTouches[0].pageY
                    this.startY = y
                },
                //手指开始滑动
                touchmove(e) {
                    let y = e.targetTouches[0].pageY
                    if ((y > this.startY) && this.$refs.scroll.scrollTop == 0) {
                        this.touchstartTitleShow = true
                        //如果当前移动距离大于初始点击坐标，则视为是下拉。并且要处于顶部才刷新，不能影响正常的列表滑动。
                        this.translateY = (y - this.startY) / 2
                    }
                },
                //手指松开
                touchend(e) {
                    let y = e.changedTouches[0].pageY
                    if (y > this.startY) {
                        this.number = 4
                        this.translateY = 0
                        this.touchstartTitleShow = false
                        this.touchEndTitleShow = true
                        setTimeout(() => {
                            this.touchEndTitleShow = false
                        }, 1000)
                        this.startY = 0
                    }
                },
                initScrollChange() {
                    this.$refs.scroll.onscroll = (e) => {
                        const offsetHeight = this.$refs.scroll.offsetHeight //可视区域的高度
                        const scrollHeight = this.$refs.scroll.scrollHeight //元素全部高度
                        const scrollTop = this.$refs.scroll.scrollTop //滚动条滚动距离
                        //可视区域高度加上滚动条滚动距离大于等于元素全部高度则表示滚动到底
                        if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
                            console.log('到底啦')
                            if (!this.loading && this.hasNext) {
                                // this.getData()
                            }
                        } else {
                            let scrollTop = document.querySelector('#tabbarBox').scrollTop
                            if (scrollTop == 0) {
                                $("#listDrag").css({ "height": 320 })
                                vm.viewHeightState = false
                            }
                        }
                    }
                },
                //滚动事件
                handleScroll() {
                    let scrollTop = document.querySelector('#tabbarBox').scrollTop
                    console.log('scrollTop', scrollTop)
                    if (scrollTop == 0) {
                        $("#listDrag").css({ "height": 320 })
                        vm.viewHeightState = false
                    }
                },
                getbMapDom(val, lon, lat, color,) {
                    let map = new BMap.Map("app_listMap")    // 创建Map实例
                    this.bMapDom = map
                    map.centerAndZoom(new BMap.Point(this.longitude, this.latitude), 8)  // 初始化地图,设置中心点坐标和地图级别
                    map.enableScrollWheelZoom(true)
                },
                tabSwitch(value, index) {
                    console.log('当前tab点击' + value + '-----' + index)
                },
                getTablistInfo() {
                    axios('../json/tabbar.json').then((res => {
                        let tabList = res.data.data
                        tabList.map((item, index) => {
                            if (item.tabTitle == '总览') {
                                item.curr = true
                            } else {
                                item.curr = false
                            }
                        })
                        this.tabList = tabList
                    }))
                }
            },
        })
    </script>
    <script type="text/javascript">
        $(function () {
            var cont = $("#barrage_name");
            var contW = $("#barrage_name").width();
            var contH = $("#barrage_name").height();
            var startX, startY, sX, sY, moveX, moveY;
            var winW = $(window).width();
            var winH = $(window).height() - 70;

            cont.on({//绑定事件
                touchstart: function (e) {
                    startX = e.originalEvent.targetTouches[0].pageX;    //获取点击点的X坐标    
                    startY = e.originalEvent.targetTouches[0].pageY;    //获取点击点的Y坐标
                    //console.log("startX="+startX+"************startY="+startY);
                    sX = $(this).offset().left;//相对于当前窗口X轴的偏移量
                    sY = $(this).offset().top;//相对于当前窗口Y轴的偏移量
                    //console.log("sX="+sX+"***************sY="+sY);
                    leftX = startX - sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置
                    rightX = winW - contW + leftX;//鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
                    topY = startY - sY;//鼠标所能移动最上端是当前鼠标距div上边距的位置
                    bottomY = winH - contH + topY;//鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置                
                },
                touchmove: function (e) {
                    e.preventDefault();
                    moveX = e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
                    moveY = e.originalEvent.targetTouches[0].pageY;//移动过程中Y轴的坐标
                    var clientY = e.originalEvent.targetTouches[0].clientY
                    if (moveY > 0 && clientY > 0) {
                        let height = vm.viewHeight - clientY
                        if (height > 320) {
                            $("#listDrag").css({ "height": vm.viewHeight - clientY })
                            vm.viewHeightState = true
                        } else {
                            $("#listDrag").css({ "height": 320 })
                            vm.viewHeightState = false
                        }
                    }
                },
            })
        })
    </script>
</body>

</html>